<!--
 * @Description: 指示步骤
 * @Author bianpengfei
 * @create 2022/2/18 19:09
 -->
<template>
  <div></div>
</template>

<script>
import introJs from 'intro.js'
import 'intro.js/introjs.css'
import { parseJsonNoError } from '@bianpengfei/utils'
import { sync } from 'vuex-pathify'

export default {
  mounted() {
    this.judgeIsRead()
  },

  computed: {
    _settingVisible: sync('app/settingVisible')
  },

  methods: {
    /**
     * 判断是否已经阅读过
     */
    judgeIsRead() {
      const read_intro = parseJsonNoError(localStorage.getItem('read_intro')) || {}
      if (!read_intro?.[10001]) {
        setTimeout(() => {
          const s1 = {
              title: '提示',
              element: document.querySelector('.nav-tag__item'),
              intro: '鼠标右击这里，可以进行一些tab页面清除与加载'
            },
            s2 = {
              title: '提示',
              element: document.querySelector('.g-el-icon-setting'),
              intro: '点击这里，可以进行个性化主题设置哦'
            },
            s3 = {
              title: '提示',
              element: document.querySelector('.el-drawer__body'),
              intro: '点击右侧，可以进行个性化主题设置哦'
            }
          const introJS = introJs().setOptions({
            showBullets: false,
            disableInteraction: true,
            prevLabel: '← 上一步',
            nextLabel: '下一步 →',
            skipLabel: '退出',
            doneLabel: '结束',
            exitOnEsc: false,
            exitOnOverlayClick: false,
            showStepNumbers: false,
            steps: [s1, s2, s3]
          })
          introJS
            .start()
            .onbeforechange((targetElement) => {
              if (s2.element === targetElement) {
                this._settingVisible = true
              }
              this.$nextTick(() => {
                introJS.refresh()
              })
            })
            .oncomplete(() => {
              this._settingVisible = false
              localStorage.setItem('read_intro', JSON.stringify({ 10001: true }))
            })
        }, 200)
      }
    }
  }
}
</script>

<style lang="scss">
.introjs-tooltip {
  .introjs-skipbutton {
    display: none;
  }
  .introjs-tooltipbuttons {
    display: flex;
    justify-content: flex-end;
    .introjs-button {
      padding: 0 10px;
      height: 26px;
      @include flex-center;
      color: #333;
      border-color: #dcdfe6;
      background: #fff;
      & + .introjs-button {
        margin-left: 10px;
      }
      &:hover {
        color: $--color-primary;
        border-color: $--color-primary;
      }
      //&:after {
      //  content: '';
      //  position: absolute;
      //  left: 0;
      //  top: 0;
      //  width: 100%;
      //  height: 100%;
      //  background: $--color-primary;
      //  opacity: 0.12;
      //}
    }
  }
}
</style>
